<script lang="ts" setup>
import { reactive } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useFs } from '@fast-crud/fast-crud';

import { BaseRoleApi } from '#/api/basic/system/baseRole';

import { createCrudOptions } from './data/crud';

defineOptions({
  name: '绑定员工',
  inheritAttrs: false,
});
const formData = reactive({
  roleId: '',
  bindEmployeeIds: [] as string[],
});

const { selectedRowKeys, crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
  context: formData,
});

const [Modal, modalApi] = useVbenModal({
  async onOpened() {
    const data = modalApi.getData();
    formData.roleId = data.id;
    formData.bindEmployeeIds = await BaseRoleApi.findEmployeeIdByRoleId(
      formData.roleId,
    );
    // crudExpose.setSearchFormData({ form: { roleId: data.id } });
    crudExpose.doRefresh();
  },
  onClosed() {
    selectedRowKeys.value = [];
  },
  async onConfirm() {
    selectedRowKeys.value = [];
    modalApi.close();
  },
});

defineExpose(modalApi);
</script>

<template>
  <Modal title="绑定员工" class="h-full w-full">
    <FsCrud ref="crudRef" v-bind="crudBinding" />
  </Modal>
</template>
